<template>
    <div>
        <div class="head">
            <h3>添加商品</h3>
        </div>
        <!--商品详情数据-->
        <el-card class="box-card">
            <div class="parent">
                <el-button @click="saveOrUpdate" type="primary">提交</el-button>
                <h4>基本信息</h4>
                <div>
                    <el-form v-model="entity" label-width="100px">
                        <el-form-item label="商品名称:">
                            <el-input style="width: 75%;" size="small" class="form" v-model="entity.name"></el-input>
                        </el-form-item>
                        <el-form-item label="商品标题:">
                            <el-input style="width: 75%;" size="small" class="form" v-model="entity.title"></el-input>
                        </el-form-item>
                        <el-form-item label="副标题(选填):" style="margin-left: 6%">
                            <el-input style="width: 75%;" size="small" class="form"
                                v-model="entity.subhead"></el-input>
                        </el-form-item>

                        <el-form-item label="商品分类:">
                            <el-select placeholder="请选择..." size="small" v-model="entity.tCategoryId" style="width: 40%"
                                class="form" @change="handleSelectChange">
                                <el-option v-for="item in categoryNameList" :label="item" :value="item">
                                </el-option>
                            </el-select>
                            <el-select placeholder="请选择..." size="small" style="width:
                            120px;margin-left: 15px" v-model="entity.tCategoryId">
                                <el-option v-for="item in sTypes" :key="item.id" :label="item.typeName" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="商品顺序:">
                            <el-input-number v-model="entity.sequence" size="small" controls-position="right" class="form"
                                style="width:56%" :min="0">
                            </el-input-number>
                            <span style="color: lightgray;font-size: 14px">&nbsp;&nbsp;数字小则靠前展示</span>
                        </el-form-item>
                        <el-form-item label="产品编码:">
                            <el-input style="width: 75%;" size="small" class="form" v-model="entity.code"></el-input>
                        </el-form-item>
                        <el-form-item label="缩略图:">
                            <div style="margin-left: 70px;">
                                <el-button style="background-color: transparent;width: 100px;height: 100px;float: left"
                                    icon="el-icon-plus" @click="upload" :disabled="hideUpload"></el-button>
                                <span style="color: lightgray;font-size: 14px;float: left">
                                    &nbsp;&nbsp;
                                    支持格式：jpg、png、jpeg格式<br />
                                    &nbsp;&nbsp;&nbsp;建议尺寸：100 x100
                                </span>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="parent">
                <h4>价格与库存</h4>
                <div>
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;margin: 0px 20px 20px 50px;">
                        <div>
                            <span style="font-size: 14px">商品价格:</span>
                            <el-input style="width: 100px;" size="small" class="form"
                                v-model="entity.price"></el-input>
                            &nbsp;元
                        </div>
                    </div>
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;margin: 0px 20px 20px 50px;">
                        <div>
                            <span style="font-size: 14px">商品库存:</span>
                            <el-input style="width: 100px;" size="small" class="form"
                                v-model="entity.stock"></el-input>
                            &nbsp;件
                        </div>
                    </div>
                </div>
            </div>
            <div class="parent" style="height: 400px;">
                <h4>商品相册</h4>
                <div>
                    <el-upload action="#" list-type="picture-card" :file-list="fileList" :limit="limitCount"
                        :auto-upload="false" :on-change="handleChange" :class="{ hide: true }" ref="upload">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </div>
                    </el-upload>
                </div>
            </div>
<!--            <div class="parent">-->
<!--                <h4>商品详情</h4>-->
<!--&lt;!&ndash;                <VueEditor v-model="entity.goodsDetail"></VueEditor>&ndash;&gt;-->
<!--            </div>-->
        </el-card>
    </div>
</template>

<script>
import addCommodity from "@/views/mallSystem/AddCommodity.vue";
export default {
    components: {
        addCommodity
    },
    name: "addDetail",
    data() {
        return {
            entity: {
                name: "",           //商品名称
                title: "",           //商品标题
                subhead: "",        //商品副标题
                tCategoryId: null,          //父品类id
                goodsTypeId: null,      //子品类id
                sequence: 0,          //商品顺序
                code: "",           //产品编码
                price: null,             //商品价格
                stock: null,  //商品库存
                details: "",        //商品详情
            },
            pTypes: [],
            sTypes: [],
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            fileList: [],        //上传商品图片列表
            limitCount: 6,           //允许上传图片数量
            hideUpload: false,        //是否隐藏上传框(每当添加/删除上传列表时),

            categoryNameList: [],
        }
    },
    methods: {

        addEntity() {
            let formData = new FormData();
            let str = JSON.stringify(this.entity);
            formData.append("js", str);

            for (let i = 0; i < this.fileList.length; i++) {         // 遍历文件集合存入formdata中
                formData.append('fileList', this.fileList[i].raw);
            }
            this.$axios.post('/order/add', formData)
                .then(res => {
                    this.$message.success("添加成功！");
                    this.$router.push({
                        name: "Commodity",
                    })
                })
        },
        saveOrUpdate(){
            this.$axios.post('/order/saveOrUpdate',this.entity).then(resp=>{
                    if (resp.data.code==200){
                        this.$message.success(resp.data.message)
                    }
            }).catch(error => {
                console.error(error);
            })
        },

        // 选择一级品类后的动作
        handleSelectChange() {
            this.entity.tCategoryId = '';
            this.getSubTypes();
        },
        //加载所有一级品类
        findAllCategoryName() {
            this.$axios.get('/category/findAllCategoryName').then(resp => {
                // 将服务器返回的数据解析并赋值给 options 数组
                this.categoryNameList = resp.data.data;
                console.log("一级品类名",this.categoryNameList)
            }).catch(error => {
                console.error(error);
            });
        },

        // 获取子品类
        getSubTypes() {
            // this.$axios.get('/goodsType/getAllSubTypes/' + this.entity.pTypeId)
            //     .then(res => {
            //         this.sTypes = res.data.data;
            //     })
        },

        // 获取一级品类
        getLevelOne() {
            // this.$axios.get('/goodsType/getAllLevelOne').then(res => {
            //     this.pTypes = res.data.data;
            // })
        },

        //图片上传(当前文件,判断当前文件列表数量是否达到限制)
        handleChange(file, fileList) {
            this.fileList = fileList;
            this.hideUpload = this.fileList.length >= this.limitCount;
        },

        //删除上传图片
        handleRemove(file) {
            this.fileList = this.fileList.filter(item => item != file);
            this.hideUpload = this.fileList.length >= this.limitCount;
        },

        //预览上传图片
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        upload() {
            this.$refs["upload"].$refs["upload-inner"].handleClick()
        }
    },
    created() {
        this.getLevelOne();
    }
}
</script>

<style scoped>
.head {
    margin-left: 20px;
}

.box-card {
    margin: 0 auto;
    width: 960px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.parent {
    width: 760px;
    margin-left: 80px;
    border-bottom: 1px solid lightgray;
    /*margin: 0 auto;*/
}

.form {
    /*margin-left: 50px;*/
}

.el-form-item {
    margin-left: 50px;
}

/deep/.hide .el-upload--picture-card {
    display: none;
}

.el-upload-list--picture-card>li:first-child {
    width: 200%;
    height: 150%;
    object-fit: contain;
}
.el-form-item__content{

}
</style>
